<template>
    <div class="step-container">
        <van-steps :active="active" active-color="#48a1fa" finish-icon="checked">
            <van-step v-for="item in steps" :key="item">{{ item }}</van-step>
        </van-steps>
    </div>
</template>

<script>
export default {
    props: ['active'],
    data(){
        return {
            steps: ['任务已发出', '调度已确认', '飞手已接受', '飞行结束', '任务已完成']
        }
    }
}
</script>

<style lang="scss" scoped>
.step-container{
    box-shadow: 0 .026667rem .08rem #888888;
    // border-radius: .133333rem;
    ::v-deep{
        .van-steps{
            overflow: unset;
            .van-steps__items{
                padding-top: 0.58667rem;
                margin: 0;
                text-align: center;
            }
            .van-step--horizontal{
                .van-step__title{
                    margin-left: 0;
                    transform: none;
                }
                .van-step__circle-container{
                    left: 50%;
                    transform: translate3d(-50%, -50%, 0);
                    top: -0.266667rem;
                    .van-step__circle{
                        width: .28rem;
                        height: .28rem;
                    }
                }
                .van-step__line{
                    top: -0.266667rem;
                    background-color: #ebedf0 !important;
                }
                &:first-child .van-step__line{
                    left: 50%;
                    width: 50%;
                }
                &:last-child{
                    position: relative;
                    right: unset;
                    width: unset;
                    .van-step__circle-container{
                        right: unset;
                    }
                    .van-step__line{
                        width: 50%;
                    }
                }
            }
        }
    }
}
</style>